<template>
	<view class="container">
		<navSearchBar :title="title" :hasSearch="true" @conFirmSearch="topSearch" ref="topSearchRef"></navSearchBar>
		<view class="operate flex-col-between">
			<text>数量：</text>
			<text class="number">{{total}}</text>
			<image src="/static/srceen.png" mode="" @click="openSearch"></image>
		</view>
		<scroll-view class="scroll" scroll-y @scrolltolower="loadMore">
			<view class="list">
				<view class="list-item flex-col-between" v-for="item in list" :key="item.id" @click="toDetail(item)">
					<view class="item-content">
						<view class="info flex-row-center">
							<view class="name flex-row-center">
								<image v-if="item.access_authority.value == 1" src="/static/checked.png" mode=""></image>
								<image v-else src="../../static/unchecked.png" mode=""></image>
								<text>{{item.name}}</text>
							</view>
							<view class="sex">{{item.sex.text}}</view> 
							<view class="post">{{item.position}}</view> 
						</view>
						<view class="company">{{item.client.name}}</view>
						<view class="person flex-row-center">
							<text>销售负责人:</text>
							<image :src="item.user.avatar" mode=""></image>
							<text>{{item.user.nickname}}</text>
						</view>
					</view>
					<image class="item-icon" src="/static/personal/right.png" mode=""></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search: "",
				title:'',
				list:[],
				currentPage:1,
				pageSize:10,
				total:0,
				searchData:{
					integrity_score:'',
					access_authority:'',
				}
			};
		},
		onLoad() {
			this.type = this.$Route.query.type;
			console.log('type',this.type)
			if(this.type == 2){
				this.title = '我的联系人'
			} else {
				this.title = '全部联系人'
			}
		},
		onShow(){
			this.currentPage = 1;
			this.list = [];
			this.getList();
			if(!this.searchData.name){
				this.$refs.topSearchRef.setValue('');
			}
		},
		methods: {
			async getList() {
				uni.showLoading({
					title: '加载中'
				})
				const reqData = {
					...this.searchData,
					page:this.currentPage,
					limit:this.pageSize,
				}
				let res;
				if(this.type == 2){
					res = await this.$api.myContactList(reqData)
				} else {
					res = await this.$api.contactList(reqData)
				}
				
				 
				if(res.data.status == 200) {
					uni.hideLoading();
					let list= res.data.data.data || [];
					this.list = this.list.concat(list);
					this.currentPage = res.data.data.current_page||1;
					this.pageSize =  res.data.data.per_page||20;
					this.total = res.data.data.total;
				}
			},
			loadMore() {
				if(this.total > this.pageSize * this.currentPage){
					this.currentPage += 1;
					this.getList();
				}
			},
			topSearch(value){
				this.searchData.name = value;
				this.currentPage = 1;
				this.list = [];
				this.getList();
			},
			openSearch(){
				this.$Router.push({name:'contactFilter',query:{
					searchData:this.searchData
				}})
			},
			toDetail(item) {
				this.$Router.push({name:"contactDetail",query:{id:item.id,type:this.type}})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}
	.operate {
		padding: 30rpx 20rpx 20rpx;
		border-bottom: 2rpx solid #EFEFEF;
		border-width: 0.4;

		text:first-child {
			font-size: $text-size;
			color: #6F6F6F;
			margin-right: 20rpx;
		}

		.number{
			color: #6F6F6F;
			font-size:28rpx;
			font-weight: $Semibold;
		}
		image {
			width: 48rpx;
			height: 48rpx;
			margin-left: auto;
		}
	}
	.scroll {
		flex: 1;
		height: 100%;
		overflow: hidden;
	}
	.list {
		padding: 0 20rpx 20rpx;
		.list-item {
			padding: 44rpx 40rpx 44rpx 30rpx;
			border-bottom: 2rpx solid #EFEFEF;
		}
		.info {
			margin-bottom: 20rpx;
			.name {
				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 20rpx;
				}
				text {
					font-size: 32rpx;
					font-weight: $Semibold;
				}
			}
			.sex {
				font-size: $text-size;
				color: #6F6F6F;
				margin: 0 40rpx 0 50rpx;
			}
			.company {
				font-size: $text-size;
				color: #6F6F6F;
			}
		}
		.company {
			font-size: $text-size;
			color: #6F6F6F;
			margin-bottom: 16rpx;
		}
		.person {
			font-size: 28rpx;
			image {
				width: 36rpx;
				height: 36rpx;
				margin: 0 16rpx;
			}
		}
		.item-icon {
			width: 10rpx;
			height: 20rpx;
			margin-left: auto;
		}
	}
</style>